import {connect} from 'dva';
import React from "react";
import {Table, Modal, Button, Form, Input} from 'antd';
import SampleChart from "@/components/SampleChart";

const FormItem = Form.Item;

const namespace = 'cards';

function mapStateToProps(state) {
  return {
    //组件提取数据
    cardsList: state[namespace].cardsList,
    statistic: state[namespace].statistic,
    //组件副作用状态，当用户 dispatch 对应 effect 时，dva 会自动注入对应 effect 的 loading 状态。
    cardsLoading: state.loading.effects['cards/queryList'],
  };
}

@connect(mapStateToProps)
class List extends React.Component {
  columns = [
    {
      title: '名称',
      dataIndex: 'name',
    },
    {
      title: '描述',
      dataIndex: 'desc',
    },
    {
      title: '链接',
      dataIndex: 'url',
      render: value => <a href={value}>{value}</a>,
    },
    {
      title: '',
      dataIndex: '_',
      render: (_, {id}) => {
        return (
          <Button onClick={() => {
            this.showStatistic(id);
          }}>图表</Button>
        );
      },
    },
  ];
  state = {
    visible: false,
    statisticVisible: false,
    id: null,
  };

  componentDidMount() {
    this.props.dispatch({
      type: 'cards/queryList',
    });
  };

  showModal = () => {
    this.setState({visible: true});
  };
  handleCancel = () => {
    this.setState({
      visible: false,
    });
  };
  handleOk = () => {
    const {dispatch, form: {validateFields}} = this.props;

    validateFields((err, values) => {
      if (!err) {
        dispatch({
          type: 'cards/addOne',
          payload: values,
        });
        // 重置 `visible` 属性为 false 以关闭对话框
        this.setState({visible: false});
      }
    });
  };
  showStatistic = (id) => {
    this.props.dispatch({
      type: 'cards/getStatistic',
      payload: id,
    });
    // 更新 state，弹出包含图表的对话框
    this.setState({id, statisticVisible: true});
  };
  handleStatisticCancel = () => {
    this.setState({
      statisticVisible: false,
    });
  };

  render() {
    const {visible, statisticVisible, id} = this.state;
    const {cardsList, cardsLoading, form: {getFieldDecorator}, statistic} = this.props;

    return (
      <div>
        <Table columns={this.columns} dataSource={cardsList} loading={cardsLoading} rowKey="id"/>
        <Button onClick={this.showModal}>新建</Button>
        <Modal
          title="新建记录"
          visible={visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <Form>
            {/*
              Form.Item 表示表示表单域
              getFieldDecorator 将包裹的组件与表单进行双向绑定使用
              required: true 表单域是否必填项
              type: url 是否需要类型检查
            */}
            <FormItem label="名称">
              {
                getFieldDecorator('name', {
                  rules: [{required: true}],
                })(<Input/>)
              }
            </FormItem>
            <FormItem label="描述">
              {
                getFieldDecorator('desc')(<Input/>)
              }
            </FormItem>
            <FormItem label="链接">
              {
                getFieldDecorator('url', {
                  rules: [{type: 'url'}],
                })(<Input/>)
              }
            </FormItem>
          </Form>
        </Modal>
        <Modal
          visible={statisticVisible}
          footer={null}
          onCancel={this.handleStatisticCancel}
        >
          <SampleChart data={statistic[id]}/>
        </Modal>
      </div>
    );
  }
}

//创建一个高阶组件，为页面组价 List 提供所需要的内容 this.props.from
export default Form.create()(List);
